<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>EaselJS Example: Using cache and snapToPixel</title>

    <link href="assets/demoStyles.css" rel="stylesheet" type="text/css"/>

	<!-- Note: All core EaselJS classes are listed here: -->
	<script type="text/javascript" src="../src/createjs/events/Event.js"></script>
	<script type="text/javascript" src="../src/createjs/events/EventDispatcher.js"></script>
	<script type="text/javascript" src="../src/createjs/utils/IndexOf.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/UID.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/Ticker.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Matrix2D.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Point.js"></script>
	<script type="text/javascript" src="../src/easeljs/geom/Rectangle.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shadow.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/SpriteSheet.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Graphics.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DisplayObject.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Container.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Stage.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Bitmap.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Sprite.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapAnimation.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/BitmapText.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Shape.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/Text.js"></script>
	<script type="text/javascript" src="../src/easeljs/display/DOMElement.js"></script>
	<script type="text/javascript" src="../src/easeljs/events/MouseEvent.js"></script>
	<script type="text/javascript" src="../src/easeljs/filters/Filter.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/ButtonHelper.js"></script>
	<script type="text/javascript" src="../src/easeljs/ui/Touch.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
	<script type="text/javascript" src="../src/easeljs/utils/SpriteSheetBuilder.js"></script>

    <!-- We also provide hosted minified versions of all CreateJS libraries.
      http://code.createjs.com -->

    <script>
        var canvas;
        var stage;
        var shape;
        var circleRadius = 30;
        var rings = 30;

        function init() {
            if (window.top != window) {
                document.getElementById("header").style.display = "none";
            }

            // create a new stage and point it at our canvas:
            canvas = document.getElementById("testCanvas");
            stage = new createjs.Stage(canvas);

            // create a large number of slightly complex vector shapes, and give them random positions and velocities:

            var colors = ["#828b20", "#b0ac31", "#cbc53d", "#fad779", "#f9e4ad", "#faf2db", "#563512", "#9b4a0b", "#d36600", "#fe8a00", "#f9a71f"];

            for(var i = 0; i < 200; i++) {
                shape = new createjs.Shape();
                for(var j = rings; j > 0; j--) {
                    shape.graphics.beginFill(colors[Math.random() * colors.length | 0]).drawCircle(0, 0, circleRadius * j / rings);
                }
                shape.x = Math.random() * canvas.width;
                shape.y = Math.random() * canvas.height;
                shape.velX = Math.random() * 10 - 5;
                shape.velY = Math.random() * 10 - 5;

                // turn snapToPixel on for all shapes - it's set to false by default on Shape.
                // it won't do anything until stage.snapToPixelEnabled is set to true.
                shape.snapToPixel = true;

                stage.addChild(shape);
            }

            // add a text object to output the current FPS:
            fpsLabel = new createjs.Text("-- fps", "bold 18px Arial", "#FFF");
            stage.addChild(fpsLabel);
            fpsLabel.x = 10;
            fpsLabel.y = 20;

            // start the tick and point it at the window so we can do some work before updating the stage:
            createjs.Ticker.addEventListener("tick", tick);
            createjs.Ticker.setFPS(50);
        }

        function tick(event) {
            var w = canvas.width;
            var h = canvas.height;
            var l = stage.getNumChildren() - 1;

            // iterate through all the children and move them according to their velocity:
            for(var i = 1; i < l; i++) {
                var shape = stage.getChildAt(i);
                shape.x = (shape.x + shape.velX + w) % w;
                shape.y = (shape.y + shape.velY + h) % h;
            }

            fpsLabel.text = Math.round(createjs.Ticker.getMeasuredFPS()) + " fps";

            // draw the updates to stage:
            stage.update(event);
        }

        function toggleCache(value) {
            // iterate all the children except the fpsLabel, and set up the cache:
            var l = stage.getNumChildren() - 1;

            for(var i = 0; i < l; i++) {
                var shape = stage.getChildAt(i);
                if (value) {
                    shape.cache(-circleRadius, -circleRadius, circleRadius * 2, circleRadius * 2);
                } else {
                    shape.uncache();
                }
            }
        }


    </script>

    <style>
        .controls {
            padding: 10px;
        }
    </style>
</head>

<body onload="init();">

<header id="header" class="EaselJS">
    <h1><span class="text-product">Easel<strong>JS</strong></span> Cache as Bitmap Example</h1>

    <p>This example demonstrates the effect of <strong>DisplayObject.cache()</strong> and <strong>snapToPixel</strong>
        on performance. Caching can provide performance benefits for some types of content because the complex vector
        shapes do not have to be re-rendered each tick. Different browsers have different thresholds for when
        caching makes sense. The results for snapToPixel vary between browsers, but in general it will have no
        effect on the un-cached shapes, but a significant effect when cached. </p>
</header>

<div class="controls">
    <input type="checkbox" onClick="toggleCache(this.checked);" id="toggleCache"/><label for="toggleCache">cache
    enabled</label><br /><strong>Note that Safari 6+ performs worse in this demo with caching due to how it
    handles vectors very well, and small textures very poorly.</strong>
</div>
<canvas id="testCanvas" width="960" height="350"></canvas>
</body>
</html>
